<!--我的关注-->
<style scoped>
.contain {
  height: 86%;
  overflow: auto;
  margin-left: 3px;
  margin-right: 3px;
}

.nick_img {
  float: none;
  width: 31%;
  margin-right: 4px;
  margin-bottom: 5px;
}

.loading-layer {
  position: absolute !important;
}

</style>
<template>
  <div class="contain">
    <scroller :on-refresh="refresh" :on-infinite="loadMore" ref="myscroller">
      <div style="margin-top: 3px;">
        <img v-for="item in data" class="nick_img" :src="item.picture" @click="showPersonHome(item.targetUserId)">
      </div>
    </scroller>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: window.localStorage["userId"],
      tip: '加载中',
      data: [],
      pageNo: 1
    }
  },
  methods: {
    showPersonHome(targetUserId) {
      this.$router.push({
        path: '/tourl/personHome',
        query: {
          targetUserId: targetUserId
        }
      })
    },
    refresh() {
      setTimeout(() => {
        this.pageNo = 1;
        this.data = [];
        this.load();
        this.$refs.myscroller.finishPullToRefresh()
      }, 1000)
    },
    loadMore() {
      //为了出现加载动作
      setTimeout(() => {
        this.load()
      }, 1000)
    },
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/myattention/queryData.json",
        params: {
          userId: this.userId,
          pageNo: this.pageNo
        },
        successFc: (response) => {
          if (response.data.data == null) {
            _that.$refs.myscroller.finishInfinite(0);
            return;
          }
          if (response.data.data) {
            response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
              _that.data.push(o)
            })
          }
          _that.$refs.myscroller.finishInfinite(1);
        }
      });
      this.pageNo++
    }
  }
}

</script>
